<template>
  <AppHeader :show-search-menu="true" active="home" @searchClick="handleSearch"></AppHeader>
  <div class="text-gray-600 body-font" style="min-height: 70vh">
    <div class="container mx-auto px-4 mx-auto">
      <div v-for="(item, i) in articles" :key="i" class="card lg:card-side card-bordered shadow">
        <div class="card-body">
          <h2 class="card-title">{{ item.title }}</h2>
          <p>{{ item.summary }}</p>
          <div class="badge badge-primary rounded-2xl">{{ item.tag }}</div>
          <br />
          <span class="stat-desc">创建时间：{{ item.create_time }}</span>
          <span class="stat-desc">修改时间：{{ item.update_time }}</span>
          <div class="card-actions">
            <button class="btn btn-primary btn-ghost" @click="$router.push('/article/' + item.id)">
              > More info
            </button>
          </div>
        </div>
      </div>

      <n-empty v-show="1 <= 0" description="没有找到内容" size="huge">
        <template #extra>
          <n-button
            size="small"
            @click="
              (() => {
                keyword = ''
                initData()
              })()
            "
            >返回
          </n-button>
        </template>
      </n-empty>
    </div>
  </div>

  <div class="mt-5" style="display: flex; justify-content: center; align-items: center">
    <div style="display: flex">
      <Pagination v-model:currentPage="current" :totalCount="total"></Pagination>
    </div>
  </div>

  <AppFooter></AppFooter>
</template>

<script setup>
import { ref, watch } from 'vue'
import { apiGetArticles } from '@/http/home'
import AppHeader from '../components/AppHeader.vue'
import Pagination from '../components/Pagination.vue'
import AppFooter from '../components/AppFooter.vue'

const current = ref(1)
const size = ref(10)
const total = ref(10)

const articles = ref([])
const isOrderByUpdate = ref(false)
const keyword = ref('')

function initData() {
  apiGetArticles(current.value, size.value, isOrderByUpdate.value, keyword.value).then((res) => {
    total.value = res.data.total_count
    articles.value = res.data.list
  })
}

function handleSearch(k) {
  keyword.value = k
  initData()
}

initData()

watch(current, () => {
  initData()
})
</script>
